export default {
    template:`
    <div class="my-switch">
        <label class="switch-btn" :class="{ active:getActive }">
            <input type="checkbox" :true-value="trueValue" :false-value="falseValue" :value="value" v-model="state">
            <span class="pot"></span>
        </label>
    </div>
    `,
    emits:["update:flag"],
    props:{
        flag:{
            // type:[Boolean,Array,Set,String],
            default(){
                return []
            }
        },
        value:{
            type:String,
            default:""
        },
        trueValue:{
            default:""
        },
        falseValue:{
            default:""
        }
    },
    computed: {
        state:{
            get(){
                return this.flag; // 取值 props 的 flag => 加载父组件变量
            },
            set(nv){
                console.log(nv)
                this.$emit("update:flag",nv) // 赋值 $emit 赋值 => 修改父组件变量
            }
        },
        getActive(){
            console.log(this.flag instanceof String)
            if(Array.isArray(this.flag)){
                return this.flag.includes(this.value)
            }else if(this.flag instanceof Set){
                return this.flag.has(this.value)
            }else if(typeof(this.flag)=="string"){
                console.log(1)
                return this.trueValue == this.flag;
            }else{
                return this.flag;
            }
        }
    },
}